<template>
  <div class="datatable">
    <el-row :gutter="20" align="middle" type="flex" style="margin: 20px auto;">
      <el-col :span="6">
        <div class="grid-content bg-purple">数据列表</div>
      </el-col>
      <el-col :span="6" :offset="12">
        <div class="grid-content bg-purple">
          <el-button @click="addGoods()">
            <span>添加</span>
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      style="width: 1120px"
      :border="true"
      :fit="true"
    >
      <el-table-column prop="id" label="编号" width="80" align="center"></el-table-column>
      <el-table-column prop="name" label="分类名称" width="180" align="center"></el-table-column>
      <el-table-column prop="level" label="级别" width="80" align="center">
       
      </el-table-column>
      <el-table-column prop="productCount" label="商品数量" width="80" align="center"></el-table-column>
      <el-table-column prop="productUnit" label="数量单位" width="80" align="center"></el-table-column>
      <el-table-column prop="navStatus" label="导航栏" width="80" align="center">
        <template slot-scope="scope">
          <el-switch
            class="switch"
                v-model="scope.row.navStatus"
                :active-value="1"
                :inactive-value="0"
                active-text
                inactive-text
                @change="navStatus($event,scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="showStatus" label="是否显示" width="80" align="center">
        <template slot-scope="scope">
          <el-switch
         class="switch"
                v-model="scope.row.showStatus"
                :active-value="1"
                :inactive-value="0"
                active-text
                inactive-text
                @change="showStatus($event,scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="80" align="center"></el-table-column>
      <el-table-column label="设置" width="199" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="lower(scope.row)" :disabled="flag">查看下级</el-button>
          <el-button size="mini" type="danger">移除商品</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="updateProduct(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5,10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalpage"
          :background="true"
          :page-size="pagesize"
        ></el-pagination>
      </div>
    </template>
  </div>
</template>


<style>
.block {
  width: 70%;
  margin: 0px auto;
}
.datatable{
  height: 650px;
  overflow: scroll;
}
.el-table {
  margin: 0px auto;
}

.el-row {
  width: 1120px;
  height: 50px;

  border: 1px solid #ebeef5;
}
.grid-content .el-button {
  float: right;
}
.grid-content .el-button span {
  text-align: center;
}
</style>
<script>
export default {
  data() {
    return {
      parentId:0,
      flag:false,
      value1: false,
      value2: true,
      totalpage: null,
      pageNum: null,
      currentPage1: 1,
      pagesize: 5,
      currpage: 1,
      tableData: []
    };
  },
  methods: {
    handleSizeChange(val) {
     var pid = this.parentId
      this.pagesize = val;
       var that = this;
      this.$axios
        .get("/productCategory/list/"+pid+"?pageNum="+this.currpage+"&pageSize="+val, {
          params: {}
        })
        .then(function(ret) {
          
          var goodsList = ret.data.data;
          
          that.tableData = goodsList.list;
         
          that.totalpage = goodsList.total;
        });
    },
    handleCurrentChange(val) {
      var pid = this.parentId
      this.currpage = val;
       var that = this;
      this.$axios
        .get("/productCategory/list/"+pid+"?pageNum="+val+"&pageSize="+this.pagesize, {
          params: {}
        })
        .then(function(ret) {
          
          var goodsList = ret.data.data;
          
          that.tableData = goodsList.list;
          
          that.totalpage = goodsList.total;
        });
    },
    //显示商品分类信息
    goodSort() {
      var pid = this.parentId
      var that = this;
      this.$axios
        .get("/productCategory/list/"+pid+"?pageNum="+this.currpage+"&pageSize="+this.pagesize, {
          params: {}
        })
        .then(function(ret) {
          
          var goodsList = ret.data.data;
          console.log(goodsList);
          that.tableData = goodsList.list;
          that.totalpage = goodsList.total;
        });
    },
    //查看对应下级
    lower(ids) {
      var that = this;
      this.flag = !this.flag
      this.parentId = ids.id
      this.currpage = 1
      
      this.$axios
        .get("/productCategory/list/"+ids.id+"?pageNum="+this.currpage+"&pageSize="+this.pagesize, {
          params: {}
        })
        .then(function(ret) {
          
          var goodsList = ret.data.data;
          console.log(goodsList);
          that.tableData = goodsList.list;
         
          that.totalpage = goodsList.total;
        });
    },
    //编辑商品分类
    updateProduct(element) {
      console.log(element);
      
          this.$axios
            .get("/productCategory/"+element.id, {})
            .then(ret => {
               
              
                this.$router.push({ name: "updateProduct", params: {  element: ret.data.data } });
            })
      
    },
    //添加商品分类
    addGoods() {
      this.$router.push("/addSort");
    },
    //删除商品分类

    handleDelete(element) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var that = this;
          this.$axios
            .post("/productCategory/delete/" + element.id, {})
            .then(function(ret) {
           
                  that.goodSort();
          
             
              
            });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    navStatus($event,element){
     
          this.$axios
            .post("/productCategory/update/navStatus?ids="+element.id+"&navStatus="+$event, {})
            .then(ret => {
               
               console.log(ret);
            })
    },
    showStatus($event,element){
         this.$axios
            .post("/productCategory/update/showStatus?ids="+element.id+"&showStatus="+$event, {})
            .then(ret => {
               
               console.log(ret);
            })
    }
  },
  mounted() {
    this.goodSort();
  }
};
</script>



